<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom bg-color="#FFF"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<view class="scrollViews">
				<view>
					<view class="item flex_wrap flex_column" v-for="(item, index) in dataList" :key="index">
						<view>
							<view class="topMessage flex_wrap row_between">
								<view class="flex_wrap row_middle">
									<u-image :src="
			                                item.useCondition == 0
			                                    ? '/static/img/myUserManage/greenpeo.png'
			                                    : '/static/img/myUserManage/orpeo.png'
			                            " width="100rpx" height="100rpx" />
									<view class="flex_wrap flex_column">
										<view style="margin-left: 20rpx">
											<u-text :text="item.couponManName" color="#333" bold size="40rpx" />
											<u-gap height="10rpx" />
											<u-text :text="`领取时间: ${item.claimedTime}`" size="26rpx"
													color="#333" mode="phone" />
										</view>
									</view>
								</view>
								<view style="margin-top: 20rpx; text-align: right">
									<view :class="item.useCondition == 0 ? 'statusBgElse' : 'statusBg'">
										{{ item.useCondition == 0 ? '未使用' : '已使用' }}
									</view>
									<u-text text="1 份" size="26rpx" color="#333" align="right"
										lineHeight="90rpx" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { querySharedCouponsToReceive } from "@/api/order.js";

	export default {
		data() {
			return {
				favorableId: '',
				dataList: [],
			};
		},
		onLoad(options) {
			this.favorableId = options.favorableId
		},
		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					getId: this.favorableId,
					pageNum: pageNo,
					pageSize: pageSize,
				};
				querySharedCouponsToReceive(params)
					.then(res => {
						this.$refs.paging.completeByTotal(res.data.rows, res.data.total);
					})
					.catch(error => {
						this.$refs.paging.complete(false);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
	}

	.pepole {
		padding-left: 80rpx;
		padding-bottom: 64rpx;
	}

	.scrollViews {
		width: 100%;
		padding: 30upx 28upx 0 28upx;
		box-sizing: border-box;
		background-color: #fff;

		.item {
			width: 100%;
			background-color: #fff;
			height: auto;
			box-shadow: 0 0 12upx 2upx rgba(0, 0, 0, 0.08);
			margin-bottom: 40upx;

			.topMessage {
				padding: 20upx;
				text-align: center;
			}

			.statusBg,
			.statusBgElse {
				width: 121rpx;
				height: 40rpx;
				font-size: 24rpx;
				background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/3bbbb8c7cdff4cc3826a3b3429a8b2e6.png");
				font-weight: 400;
				color: #ffffff;
				line-height: 40rpx;
				text-align: center;
				background-size: cover;
			}

			.statusBgElse {
				background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1551094b72d646eb9c734681dad463d8.png");
			}

			.timeBox {
				margin-left: 100rpx;
			}
		}
	}
</style>
